 <!-- Footer -->
        <div id="footer">
        	<div class="container_12">
            	<div class="grid_12">
                	<!-- You can change the copyright line for your own -->
                	<p>&copy; <?php echo date("Y"); ?>. Allyfolio</p>
        		</div>
            </div>
            <div style="clear:both;"></div>
        </div> <!-- End #footer -->
        <form method="post" enctype="multipart/form-data" >
			<div id="profilediv" style="position:absolute;top:0px;left:0px;background-color:#444444;width:100%;height:100%;z-index:1000;display:none;">
				
					<table style="width:30%;margin-top:20%;margin-left:40%;background-color:white;" cellpadding="10px">
						<tr>
							<th colspan="2" style="font-weight:bold;background-color:black;font-size:15px;">Profile Picture : <a href="javascript:void(0);" onclick="document.getElementById('profilediv').style.display='none';" title="Close" ><span style="float:right;color:white;font-size:14px;margin-right:10px">X</span></a></th>
						</tr>	
						<tr>
							<td style="height:20px" colspan="2"></td>
						</tr>
						<tr>
							<td style="width:30%;padding-left:20px;font-size:13px;"><b>Upload Picture: </b></td>
							<td style="width:70%;"><input type="file" name="profile_photo" id="profile_photo" style="width:200px;" />
							<span style="color:lightgray;">(Note: Image size should be 140*195px. If it exceeds then, will be rearranged automatically.)</span>
							</td>
						</tr>
						<tr>
							<td style="height:20px" colspan="2"></td>
						</tr>
						<tr>
							<td colspan="2" style="padding-left:20px;">
								<input type="submit" class="submit-green" name="btn_submit" value="submit" onclick="return validate_pic();">
							</td>
						</tr>
						<tr>
							<td style="height:10px" colspan="2"></td>
						</tr>
					</table>
				
			</div>
		</form>
	</body>
</html>
<script>
function upload_profilepic()
{
	
	document.getElementById('profilediv').style.display='';
	
	var B = document.body,
    H = document.documentElement,
    height

	if(document.height !== undefined) {
	    height = document.height // For webkit browsers
	} else {
	    height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
	}
	
	document.getElementById('profilediv').style.height=height+"px";
	
}
function validate_pic()
{
	var filename=document.getElementById('profile_photo').value;
	var filenamearr=filename.split(".");
	if(document.getElementById('profile_photo').value=="")
	{
		alertify.alert("Please select picture!");
		document.getElementById('profile_photo').focus();
		return false;
	}
	else if( filenamearr[1].toString().toLowerCase()!="jpg" && filenamearr[1].toString().toLowerCase()!="jpeg" && filenamearr[1].toString().toLowerCase()!="JPG" && filenamearr[1].toString().toLowerCase()!="png" && filenamearr[1].toString().toLowerCase()!="PNG" && filenamearr[1].toString().toLowerCase()!="gif" && filenamearr[1].toString().toLowerCase()!="GIF")
	{
		alertify.alert("Please select valid format!");
		document.getElementById('profile_photo').focus();
		return false;
	}
	
}
</script>